<template>
    <div class="TestplanContainer">
        <!--头部面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>测试执行</el-breadcrumb-item>
            <el-breadcrumb-item>测试计划</el-breadcrumb-item>
        </el-breadcrumb>

        <!--查询卡片-->
        <el-card class="box-card ">
            <el-form ref="queryFormRef" :inline="true" :model="queryTestplanForm" class="queryTestplanForm">
                <el-form-item label="计划名" prop="name">
                    <el-input v-model="queryTestplanForm.name" placeholder="计划名" clearable></el-input>
                </el-form-item>
                <el-form-item label="测试项目" prop="projectName">
                    <el-select v-model="queryTestplanForm.projectName" filterable placeholder="请选择">
                        <el-option
                                v-for="project in projects"
                                :key="project.id"
                                :label="project.name"
                                :value="project.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="queryTestplanForm.description" placeholder="描述" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getTestplanList()">查询</el-button>
                    <el-button type="info" icon="el-icon-search" @click="resetQueryForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--表格-->
        <el-card class="box-card">
            <el-button type="primary" icon="el-icon-circle-plus" @click="newTestplanDialogVisible = true">
                新增
            </el-button>
            <!--            <el-button @click="showNewTestcaseFormModel">show newTestcaseFormModel</el-button>-->
            <!--            <el-button @click="showEditTestcaseFormModel">show editTestcaseFormModel</el-button>-->
            <el-table
                    :data="testplanList"
                    border
                    style="width: 100%"
                    :header-cell-style="headerCellstyle"
                    stripe>

                <el-table-column
                        type="expand">

                    <template slot-scope="scope">
                        <el-table
                                :data="scope.row.batches"
                                border
                                style="width: 100%"
                                :header-cell-style="headerCellstyle"
                                stripe>


                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="60px">
                            </el-table-column>
                            <el-table-column
                                    label="执行批次描述"
                                    prop="description">
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="执行状态" width="80px">
                            </el-table-column>
                            <el-table-column
                                    prop="batch_start_time"
                                    label="执行时间"
                                    width="145px"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="sum"
                                    label="用例数" width="60px"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="success"
                                    label="成功数" width="60px">
                            </el-table-column>

                            <el-table-column
                                    label="成功率" width="60px">
                                <template slot-scope="scope">
                                    {{scope.row.sum==0?'':scope.row.success/scope.row.sum*100+'%'}}
                                </template>
                            </el-table-column>

                            <el-table-column label="详情" width="80px">
                                <template slot-scope="scope">
                                    <el-button @click="getResultTestcaseList(scope)">查看</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>

                </el-table-column>

                <el-table-column
                        type="index"
                        label="序号"
                        width="60px">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="测试计划名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        label="所属项目"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="测试计划描述">
                </el-table-column>
                <el-table-column label="执行" width="60">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit-outline" circle type="info"
                                   @click="executeTestplan(scope.row.id)"></el-button>
                    </template>

                </el-table-column>
                <el-table-column
                        label="操作"
                        width="130">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle
                                   @click="editTestcase(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="deleteATestcase(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页 暂时先不看-->
        <el-pagination


                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>

        <!--批次具体执行测试用例表格对话框-->
        <el-dialog :visible.sync="testcaseTestdataResultVisible" title="测试用例执行详情"
                    center
                    width="70%">
            <el-table :data="resultTestcaseTestdataList"
                      :header-cell-style="headerCellstyle"
                      stripe border>
                <el-table-column type="index" label="序号">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="150px">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="150px">
                </el-table-column>
                <el-table-column prop="result" label="执行结果" width="70px">
                </el-table-column>


                <el-table-column  label="测试用例">
                    <template slot-scope="scope">
                        <el-popover
                                placement="top-start"
                                width="400"
                                trigger="hover">
                            <p>{{scope.row.testcaseCode}}</p>
                            <span slot="reference">{{scope.row.testcaseName}}</span>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column prop="testdataName" label="测试数据">
                </el-table-column>
                <el-table-column label="日志" width="60px">
                    <template slot-scope="scope">
                        <el-link :href="'http://localhost:9090/'+scope.row.logPath+'/log.html'" target="_blank">查看</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!--新增测试计划的对话框-->
        <el-dialog :visible.sync="newTestplanDialogVisible"
                   @close="whenNewTestplanDialogClose()" title="新增测试计划" center width="70%">
            <el-form :model="newTestplanForm">
                <el-col>
                    <el-row :gutter="10">
                        <el-col :span="5">
                            <el-form-item label="计划名" prop="name">
                                <el-input v-model="newTestplanForm.name" placeholder="计划名" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="测试项目" prop="projectName">
                                <el-select @change="selectProjectChanged" v-model="newTestplanForm.projectId" filterable placeholder="请选择">
                                    <el-option
                                            v-for="project in projects"
                                            :key="project.id"
                                            :label="project.name"
                                            :value="project.id"
                                            >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="测试计划描述" prop="description">
                                <el-input v-model="newTestplanForm.description" placeholder="测试计划描述" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-button type="primary" icon="el-icon-plus" @click="newTestcaseTestdata()">新增</el-button>
                        <el-table :data="newTestplanForm.testcaseTestdata"
                                   stripe border
                                  :header-cell-style="headerCellstyle">
                            <el-table-column type="index" label="序号" >
                            </el-table-column>
                            <el-table-column prop="testcaseName" label="测试用例">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.testcaseId"

                                               no-data-text="未选择测试项目或无数据"
                                               @change="selectTestcaseChanged(scope.row)" filterable placeholder="请选择">
                                        <el-option
                                                v-for="testcase in testcases"
                                                :key="testcase.id"
                                                :label="testcase.name"
                                                :value="testcase.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="testdataName" label="测试数据">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.testdataId"
                                               no-data-text="未选择测试用例或无数据"
                                               filterable placeholder="请选择">
                                        <el-option
                                                v-for="testdata in testdatas"
                                                :key="testdata.id"
                                                :label="testdata.name"
                                                :value="testdata.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="60px">
                                <template slot-scope="scope">
                                    <el-button type="danger" icon="el-icon-close" circle
                                    @click="deleteAtestcaseTestdataWhenNewTestplan(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </el-col>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="newTestplanDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitNewTestplan">确 定</el-button>
            </div>
        </el-dialog>

        <!--执行测试计划的对话框-->
        <el-dialog :visible.sync="executeTestplanDialogVisible"
                    title="执行测试计划" center width="50%"
                    @close="whenExecuteTestplanDialogClose"
                    @open="getOnlineEndRunnerList">
            <div id="executeTestplanFormContainer">
                <el-form :model="executeTestplanForm">
                    <el-form-item label="请选择执行机">
                        <el-select v-model="executeTestplanForm.endRunnerIp"
                                   no-data-text="当前无在线执行机"
                                   filterable placeholder="请选择执行机">
                            <el-option
                                    v-for="endRunner in endRunnerList"
                                    :key="endRunner.id"
                                    :label="endRunner.ip"
                                    :value="endRunner.ip">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="执行批次描述" prop="batchDescription">
                        <el-input v-model="executeTestplanForm.description"></el-input>
                    </el-form-item>
                    <el-form-item label="发送结果邮件" prop="senEmailTo">
                        <el-input v-model="executeTestplanForm.senEmailTo"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="newTestplanDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitNewBatch">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {

        created() {
            this.getProjects();
            this.getTestplanList();
        },
        name: "Testplan",
        data() {
            return {
                queryTestplanForm: {
                    name:'',
                    projectName:'',
                    description:''
                },
                projects:[],
                testplanList:[],
                headerCellstyle:{'background-color':'#f5f7fa'},
                resultTestcaseTestdataList:[],
                testcaseTestdataResultVisible:false,
                newTestplanDialogVisible:false,
                newTestplanForm:{
                    testcaseTestdata:[],
                },
                /*装载testcase list和testdatas的容器，装载时机？*/
                testcases:[],
                testdatas:[],
                /*执行测试任务的对话框*/
                executeTestplanDialogVisible:false,
                /*执行测试任务的表单*/
                executeTestplanForm:{},
                /*endrunnerg列表*/
                endRunnerList:{}
            }
        },
        methods:{
            /*获取测试项目列表*/
            async getProjects() {

                const {data: res} = await this.$http.get('project/getAll')
                if (res.status !== 200) {
                    return this.$message.error('获取projects list失败')
                }
                this.projects = res.data;
            },
            /*获取测试计划列表*/
            async getTestplanList() {
                const {data: res} = await this.$http.post('testplan/getTestplanList', this.queryTestplanForm);
                // console.log(res);
                if (res.status !== 200) {
                    return this.$message.error('获取测试计划列表失败！')
                }
                this.testplanList = res.data;

            },
            /*重置测试计划查询表单*/
            resetQueryForm(){
                this.$refs.queryFormRef.resetFields();
            },
            /*批次点击查看测试用例执行情况*/
            async getResultTestcaseList(scope){
                console.log(scope);
                this.testcaseTestdataResultVisible = true;
                const {data: res} = await this.$http.get('resultTestcaseTestdata/getlistByBatch?batchId='+scope.row.id);
                // console.log(res);
                if (res.status !== 200) {
                    return this.$message.error('获取测试用例执行结果失败！')
                }
                this.resultTestcaseTestdataList = res.data;


            },
            /*新增关联测试用例测试数据*/
            newTestcaseTestdata(){
                this.newTestplanForm.testcaseTestdata.push({
                    testcaseId:'',
                    testdataId:''
                })
            },
            /*当新增测试计划的弹框关闭时清空表单*/
            whenNewTestplanDialogClose(){
                this.newTestplanForm={
                    testcaseTestdata:[]
                };
                /*清空装载testcase list和testdatas的容器，装载时机？*/
                this.testcases=[];
                this.testdatas=[]

            },
            /*新增测试计划时删除一项testcasetestdata*/
            deleteAtestcaseTestdataWhenNewTestplan(row){

                let indexBak;
                this.newTestplanForm.testcaseTestdata.forEach((item,index)=>{
                    if(item === row){
                        return indexBak=index;
                    }
                })
                this.newTestplanForm.testcaseTestdata.splice(indexBak,1);
            },
            /*新增测试计划时测试项目改变时刷新testcaseList*/
            selectProjectChanged(){
                this.getTestcaseList()
            },
            /*新增测试计划时测试用例改变时刷新testdataList*/
            selectTestcaseChanged(row){
                this.getTestdataList(row.testcaseId);
            },

            /*获取测试用例列表*/
            async getTestcaseList() {


                const {data: res} = await this.$http.get('testcase/getTestcaseListByProjectId?projectId='+this.newTestplanForm.projectId);
                // console.log(res);
                if (res.status !== 200) {
                    return this.$message.error('获取用例列表失败！')
                }
                this.testcases = res.data;

            },

            /*获取测试用例数据列表*/
            async getTestdataList(testcaseId) {


                const {data: res} = await this.$http.get('testdata/getTestdataList?testcaseId='+testcaseId);
                // console.log(res);
                if (res.status !== 200) {
                    return this.$message.error('获取用例数据失败！')
                }
                this.testdatas = res.data;

            },
            /*提交testplan*/
            async submitNewTestplan(){
                const {data: res} = await this.$http.post('testplan/newTestplan',this.newTestplanForm);
                if (res.status !== 200) {
                    return this.$message.error('保存测试计划失败！');
                }
                this.$message.success('保存测试计划成功！');
                this.getTestplanList();
                this.newTestplanDialogVisible=false;
            },
            /*点击执行任务*/
            executeTestplan(id){
                this.executeTestplanForm.testplanId=id;
                this.executeTestplanDialogVisible=true;
            },
            /*提交执行任务*/
            async submitNewBatch(){
                const {data: res} = await this.$http.post('executeTest/execute',this.executeTestplanForm);
                if (res.status !== 200) {
                    return this.$message.error('提交执行测试计划失败！');
                }
                this.$message.success('提交执行测试计划成功！');
                this.executeTestplanDialogVisible=false;
            },
            /*当执行测试对话框关闭时*/
            whenExecuteTestplanDialogClose(){
                /*清空执行测试任务的表单*/
                this.executeTestplanForm={};
            },
            /*查询在线的endrunnerList*/
            async getOnlineEndRunnerList(){
                const {data:res} = await this.$http.get("endRunner/getAllOnlineEndRunners");
                if(res.status !== 200) return this.$message.error("查询执行终端失败！")
                this.endRunnerList = res.data;
            }
        }

    }
</script>

<style scoped>
    .el-card {
        margin-bottom: 20px;
    }
</style>